<template>
  <ag-popup
    v-model="visible"
    :title="dynamicTitle"
    class="service-info-config"
    @onCancel="onCancel"
  >
    <div class="input-block">
      <p>图层名称</p>
      <el-select
        size="small"
        class="select-layer"
        placeholder="请选择图层名称"
        v-model="layerSelect"
        @change="handleChange"
      >
        <el-option
          v-for="item in layerTreeList"
          :key="item.id"
          :value="item.id"
          :label="item.nameCn"
        >
        </el-option>
      </el-select>
    </div>
    <div class="input-block">
      <span> 高度字段 </span>
      <el-input
        size="small"
        placeholder="高度字段"
        v-model="currentForm.height_field"
        @change="onInputChange"
      ></el-input>
    </div>
    <div class="input-block">
      <span> 图层 ID </span>
      <el-input
        size="small"
        placeholder="图层 ID"
        v-model="currentForm.id"
        @change="onInputChange"
        disabled
      ></el-input>
    </div>
    <div class="input-block">
      <span> 底图 URL </span>
      <el-input
        size="small"
        placeholder="图层 URL"
        v-model="currentForm.base_layer_url"
        @change="onInputChange"
      ></el-input>
    </div>
    <div class="input-block">
      <span> 底图 layerTable </span>
      <el-input
        size="small"
        placeholder="图层 URL"
        v-model="currentForm.base_layer_table"
        @change="onInputChange"
      ></el-input>
    </div>
    <div class="input-block">
      <span> 单一配色 </span>
      <el-input
        size="small"
        placeholder="单一配色"
        v-model="currentForm.single_fill_style"
        @change="onInputChange"
      ></el-input>
    </div>
    <div class="input-block">
      <span>分类配色 </span>
      <el-input
        size="small"
        type="textarea"
        placeholder="分类配色"
        v-model="currentForm.style_class"
        @change="onInputChange"
      ></el-input>
    </div>

    <div class="button-group">
      <el-button size="small" @click="onCancel">取消</el-button>
      <el-button
        size="small"
        :disabled="isButtonDisable"
        type="primary"
        @click="save"
        >保存</el-button
      >
    </div>
  </ag-popup>
</template>

<script>
import AgPopup from "@/views/components/precut/AgPopup.vue";
export default {
  props: {
    dynamicTitle: {
      type: String,
      default: "Service infomation",
    },
  },
  components: {
    "ag-popup": AgPopup,
  },
  data() {
    return {
      visible: false,
      layerSelect: "",
      currentForm: {
        id: "",
        name: "",
        height_field: "",
        base_layer_url: "",
        base_layer_table: "",
        single_fill_style: "",
        style_class:"",
      },
      layerTreeList: CIM.layerTree._layerTreeData, //图层树的列表
      isButtonDisable: true,
    };
  },
  methods: {
    //表单重置
    resetForm() {
      this.layerSelect = "";
      this.currentForm = {
        id: "",
        name: "",
        height_field: "",
        base_layer_url: "",
        base_layer_table: "",
        single_fill_style:"",
        style_class:"",
      };
    },
    //设当前的表单信息
    setCurrentForm(record) {
      this.currentForm = JSON.parse(JSON.stringify(record));
      this.layerSelect = this.currentForm.name;
    },
    //监听事件，当输入的内容有变化时，控制保存按钮是否可操作
    onInputChange() {
      this.isButtonDisable = false;
    },
    //取消操作
    onCancel() {
      this.visible = false;
      this.isButtonDisable = true;
    },
    //保存添加/编辑的表单
    save() {
      if (this.dynamicTitle==="修改白模服务") {
        this.$emit("editData", this.currentForm);
      } else {
        this.$emit("addData", this.currentForm);
      }
    },
    //处理第二个下拉列表的变化
    handleChange(value) {
      let item = this.layerTreeList[value];
      if (item) {
        this.currentForm.id = item.id;
        this.currentForm.name = item.nameCn;
      }
    },
  },
};
</script>
<style scoped>
.service-info-config {
  width: 400px;
  /* height: 350px; */
}
.input-block {
  margin: 10px;
}
.button-group {
  text-align: center;
  margin-top: 10px 5px;
}
</style>